<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商机报备清单</title>
    <link rel="stylesheet" href="../elementui-2.15.6/element-icons.ttf">
    <link rel="stylesheet" href="../elementui-2.15.6/element-icons.woff">
    <link rel="stylesheet" href="../elementui-2.15.6/icon.css">
    <link rel="stylesheet" href="../elementui-2.15.6/elmentui.css">
    <link rel="stylesheet" href="../common.css">
    <link rel="stylesheet" href="./scss/index.css">
    <script src='../vue-2.6.12.js'></script>
    <script src='../elementui-2.15.6/elementui.js'></script>
</head>

<body>
    <div class="zl-business-report" id="zl-business-report-box">
        <div class="zl-business-report-main" v-show="!showDetail">
            <div class="zl-business-report-search">

                <div class="left-btn">
                    <el-form :model="searchForm" :inline="true" size="small">
                        <el-form-item label="关键字">
                            <el-input v-model="searchForm.key" placeholder="请输入商机项目名称或最终用户"></el-input>
                        </el-form-item>
                        <el-form-item label="报备状态">
                            <el-select v-model="searchForm.state" placeholder="请选择">
                                <el-option v-for="(item, index) in stateList" :label="item.label" :value="item.value"
                                    :key="'state' + index">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="right-btn">
                    <el-button type="primary" size="small" icon="el-icon-search" @click="search">查询</el-button>
                    <el-button type="primary" size="small" icon="el-icon-refresh-left" @click="reset">重置</el-button>
                </div>
                <div class="total-rows">
                    查询到的商机：<span class="number">{{pageData.total}}</span>
                </div>
            </div>
            <div class="zl-business-report-table">
                <el-table :data="tableData" style="width: 200%" height="100%" ref="multipleTable"
                    :row-class-name="tableRowClassName">
                    <el-table-column width="55">
                        <template slot-scope="scope">
                            <em class="el-icon-paperclip" style="font-size: 16px;"></em>
                        </template>
                    </el-table-column>
                    <template v-for="(item, index) in tableHeader">
                        <el-table-column :prop="item.key" :label="item.label" v-if="item.key !== 'op'" :key="index"
                            :min-width="item.minWidth" :width="item.width" :align="item.align || 'center'"
                            show-overflow-tooltip>
                            <template slot-scope="scope">
                                <!-- 第一种方式：直接在显示内容中添加换行符 -->
                                <!-- <span v-if="item.slot" v-html="scope.row[item.key]"></span> -->
                                <!-- 第二种 通过不同字段组装，便于维护 -->
                                <div v-if="item.slot && item.key === 'zzyhxx'">
                                    <span class="slotText">{{scope.row.xmm}}</span>
                                    <span class="slotText">{{scope.row.userName}}</span>
                                    <span class="slotText">{{scope.row.address}}</span>
                                    <span class="slotText red">{{scope.row.email}}</span>
                                </div>
                                <div v-else-if="item.slot && item.key === 'bbzt'">
                                    <!-- <span class="slotText">{{scope.row.zt}}</span> -->
                                    <el-tag size="small"
                                        :type="scope.row.zt === '成立' || scope.row.zt === '赢单'? 'success': scope.row.zt === '已过期' || scope.row.zt === '未成立' ? 'danger' : scope.row.zt === '丢单' || scope.row.zt === '快过期'? 'warning':''">
                                        {{scope.row.zt}}
                                    </el-tag>
                                    <span class="slotText">{{ztMap[scope.row.zt]}}于：{{scope.row.ztTime}}</span>
                                </div>
                                <span v-else>{{scope.row[item.key]}}</span>
                            </template>
                        </el-table-column>
                    </template>
                    <el-table-column label="操作" width="220">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="openAuthDialog(1)">查看详情</el-button>
                            <el-button type="text" size="small" @click="openAuthDialog(2)"
                                v-if="scope.row.ztCode === '6' || scope.row.ztCode === '3'">更新</el-button>
                            <el-button type="text" size="small" @click="revoke(scope.row)"
                                v-if="scope.row.ztCode === '6' || scope.row.ztCode === '4'">授权</el-button>
                            <el-button type="text" size="small" @click="withdraw(scope.row)"
                                v-if="scope.row.ztCode === '2'">撤回</el-button>
                            <el-button type="text" size="small" @click="extensionRequest(scope.row)"
                                v-if="scope.row.ztCode === '3'">延期申请</el-button>
                            <el-button type="text" size="small" @click="editRow(scope.row)"
                                v-if="scope.row.ztCode === '8' || scope.row.ztCode === '1'">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageData.currentPage" :page-sizes="[10, 20, 30, 40, 50]"
                    :page-size="pageData.pageSize" layout="total, prev, pager, next, sizes" :total="pageData.total">
                </el-pagination>
            </div>
        </div>
        <!-- 申请授权、详情弹框 -->
        <div class="zl-business-report-addOrEditBox" v-show="showDetail">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>查看详情信息</span>
                    <el-button style="float: right; padding: 3px 0;font-size:20px" type="text" icon="el-icon-close"
                        @click="closed(2)"></el-button>
                </div>
                <div class="box-card-form">
                    <div class="box-card-form-btn">
                        <el-button type="primary" size="small" icon="el-icon-s-promotion" @click="exportData">导出</el-button>
                    </div>
                    <el-descriptions v-for="(item, index) in detailItemList" :key="'item' + index" :title="item.title" size="small" direction="vertical" :column="2" border>
                        <template v-for="(info, index) in item.baseInfo">
                            <el-descriptions-item :label="info.label" :key="index">
                                {{authForm[info.key]}}</el-descriptions-item>
                        </template>
                    </el-descriptions>
                    <div class="goods-list">
                        <div class="goods-list-title"><span class="title-spot">
                                <em class="spot"></em>产品清单
                            </span></div>
                        <div class="goods-list-table">
                            <el-table :data="goodsData" border style="width: 100%">
                                <el-table-column prop="goodsname" label="产品" show-overflow-tooltip width="400">
                                </el-table-column>
                                <el-table-column prop="goodsCode" label="料号" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="price" label="单价" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="number" label="数量" show-overflow-tooltip></el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <div class="goods-list">
                        <div class="goods-list-title"><span class="title-spot">
                                <em class="spot"></em>项目跟踪记录
                            </span></div>
                        <div class="goods-list-title goods-list-subTitle"><span class="title-spot">
                                项目跟进中
                            </span></div>
                        <div class="goods-list-table">
                            <el-timeline>
                                <el-timeline-item timestamp="2018/4/12" placement="top">
                                    <el-card>
                                        2021-08-27 08:59:00 Mandy将商机： XXX 变更为 XXXXX
                                    </el-card>
                                </el-timeline-item>
                                <el-timeline-item timestamp="2018/4/3" placement="top">
                                    <el-card>
                                        2021-08-27 08:59:00 Mandy将商机： XXX 变更为 XXXXX
                                    </el-card>
                                </el-timeline-item>
                                <el-timeline-item timestamp="2018/4/2" placement="top">
                                    <el-card>
                                        2021-08-27 08:59:00 Mandy将商机： XXX 变更为 XXXXX
                                    </el-card>
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                    </div>
                    <div class="goods-list">
                        <div class="goods-list-title"><span class="title-spot">
                                <em class="spot"></em>项目赢单
                            </span></div>
                        <div class="goods-list-table goods-list-content">
                            <div class="goods-list-content-item">
                                <div class="goods-list-content-item-left">
                                    赢单设备
                                </div>
                                <div class="goods-list-content-item-right">
                                    <el-card>
                                        <el-tag type="primary" v-for="item in 20" :key="item">3C3 PRO 20KVA/1</el-tag>
                                    </el-card>
                                </div>
                            </div>
                            <div class="goods-list-content-item">
                                <div class="goods-list-content-item-left">
                                    赢单凭证
                                </div>
                                <div class="goods-list-content-item-right">
                                    <el-card>
                                        <el-tag type="primary" v-for="item in 20" :key="item">4M392LAA08</el-tag>
                                    </el-card>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-card-bottom">
                    <el-button type="primary" size="small" @click="closed(2)">关闭</el-button>
                </div>
            </el-card>
        </div>
    </div>

    <script>
        new Vue({
            el: '#zl-business-report-box',
            data() {
                return {
                    searchForm: {
                        key: '',
                        state: ''
                    },
                    stateList: [
                        { label: '全部(默认)', value: '' },
                        { label: '草稿(拒绝后进入草稿)', value: '1' },
                        { label: '审核中', value: '2' },
                        { label: '快过期', value: '3' },
                        { label: '赢单', value: '4' },
                        { label: '丢单', value: '5' },
                        { label: '成立', value: '6' },
                        { label: '标记商机', value: '7' },
                        { label: '冲突/重复(结束)', value: '8' },
                        { label: '已过期', value: '9' },
                    ],
                    ztMap: {
                        '成立': '成立',
                        '审核中': '报备',
                        '已过期': '过期',
                        '未成立': '报备',
                        '赢单': '关闭',
                        '丢单': '关闭',
                        "冲突/重复": '关闭',
                        '快过期': '过期',
                        '草稿': '编辑'
                    },
                    showDetail: false,
                    disabledAll: false,
                    disabledParams: false,
                    currentType: 2,
                    tableHeader: [
                        { label: '备案号', key: 'bah', minWidth: '15%', slot: true },
                        { label: '项目名称', key: 'xmmc', minWidth: '20%', },
                        { label: '最终用户信息', key: 'zzyhxx', minWidth: '30%', align: 'left', slot: true },
                        { label: '报备状态', key: 'bbzt', minWidth: '20%', align: 'left', slot: true }
                    ],
                    tableData: [
                        {
                            bah: '123456', xmmc: '中国人民银行清算中心UPS项目',
                            zzyhxx: '中国人民银行清算中心<br>董经理<br>jiangsu 无锡市滨湖区十里明珠堤<br>tech61@yuanfeng.cn',
                            bbzt: '成立<br>成立于：2021/9/27',
                            xmm: '中国人民银行清算中心',
                            userName: '董经理',
                            address: 'jiangsu 无锡市滨湖区十里明珠堤',
                            email: 'tech61@yuanfeng.cn',
                            zt: '成立',
                            ztCode: '6',
                            ztTime: '2021/9/27'
                        },
                        {
                            bah: '123456', xmmc: '中国人民银行清算中心UPS项目',
                            zzyhxx: '中国人民银行清算中心<br>董经理<br>jiangsu 无锡市滨湖区十里明珠堤<br>tech61@yuanfeng.cn',
                            bbzt: '成立<br>成立于：2021/9/27',
                            xmm: '中国人民银行清算中心',
                            userName: '董经理',
                            address: 'jiangsu 无锡市滨湖区十里明珠堤',
                            email: 'tech61@yuanfeng.cn',
                            zt: '审核中',
                            ztCode: '2',
                            ztTime: '2021/9/27'
                        },
                        {
                            bah: '123456', xmmc: '中国人民银行清算中心UPS项目',
                            zzyhxx: '中国人民银行清算中心<br>董经理<br>jiangsu 无锡市滨湖区十里明珠堤<br>tech61@yuanfeng.cn',
                            bbzt: '成立<br>成立于：2021/9/27',
                            xmm: '中国人民银行清算中心',
                            userName: '董经理',
                            address: 'jiangsu 无锡市滨湖区十里明珠堤',
                            email: 'tech61@yuanfeng.cn',
                            zt: '已过期',
                            ztCode: '9',
                            ztTime: '2021/9/27'
                        },
                        {
                            bah: '123456', xmmc: '中国人民银行清算中心UPS项目',
                            zzyhxx: '中国人民银行清算中心<br>董经理<br>jiangsu 无锡市滨湖区十里明珠堤<br>tech61@yuanfeng.cn',
                            bbzt: '成立<br>成立于：2021/9/27',
                            xmm: '中国人民银行清算中心',
                            userName: '董经理',
                            address: 'jiangsu 无锡市滨湖区十里明珠堤',
                            email: 'tech61@yuanfeng.cn',
                            zt: '赢单',
                            ztCode: '4',
                            ztTime: '2021/9/27'
                        },
                        {
                            bah: '123456', xmmc: '中国人民银行清算中心UPS项目',
                            zzyhxx: '中国人民银行清算中心<br>董经理<br>jiangsu 无锡市滨湖区十里明珠堤<br>tech61@yuanfeng.cn',
                            bbzt: '成立<br>成立于：2021/9/27',
                            xmm: '中国人民银行清算中心',
                            userName: '董经理',
                            address: 'jiangsu 无锡市滨湖区十里明珠堤',
                            email: 'tech61@yuanfeng.cn',
                            zt: '未成立',
                            ztCode: '10',
                            ztTime: '2021/9/27'
                        },
                        {
                            bah: '123456', xmmc: '中国人民银行清算中心UPS项目',
                            zzyhxx: '中国人民银行清算中心<br>董经理<br>jiangsu 无锡市滨湖区十里明珠堤<br>tech61@yuanfeng.cn',
                            bbzt: '成立<br>成立于：2021/9/27',
                            xmm: '中国人民银行清算中心',
                            userName: '董经理',
                            address: 'jiangsu 无锡市滨湖区十里明珠堤',
                            email: 'tech61@yuanfeng.cn',
                            zt: '丢单',
                            ztCode: '5',
                            ztTime: '2021/9/27'
                        },
                        {
                            bah: '123456', xmmc: '中国人民银行清算中心UPS项目',
                            zzyhxx: '中国人民银行清算中心<br>董经理<br>jiangsu 无锡市滨湖区十里明珠堤<br>tech61@yuanfeng.cn',
                            bbzt: '成立<br>成立于：2021/9/27',
                            xmm: '中国人民银行清算中心',
                            userName: '董经理',
                            address: 'jiangsu 无锡市滨湖区十里明珠堤',
                            email: 'tech61@yuanfeng.cn',
                            zt: '冲突/重复',
                            ztCode: '8',
                            ztTime: '2021/9/27'
                        },
                        {
                            bah: '123456', xmmc: '中国人民银行清算中心UPS项目',
                            zzyhxx: '中国人民银行清算中心<br>董经理<br>jiangsu 无锡市滨湖区十里明珠堤<br>tech61@yuanfeng.cn',
                            bbzt: '成立<br>成立于：2021/9/27',
                            xmm: '中国人民银行清算中心',
                            userName: '董经理',
                            address: 'jiangsu 无锡市滨湖区十里明珠堤',
                            email: 'tech61@yuanfeng.cn',
                            zt: '快过期',
                            ztCode: '3',
                            ztTime: '2021/9/27',
                            isRequest: true
                        },
                        {
                            bah: '123456', xmmc: '中国人民银行清算中心UPS项目',
                            zzyhxx: '中国人民银行清算中心<br>董经理<br>jiangsu 无锡市滨湖区十里明珠堤<br>tech61@yuanfeng.cn',
                            bbzt: '成立<br>成立于：2021/9/27',
                            xmm: '中国人民银行清算中心',
                            userName: '董经理',
                            address: 'jiangsu 无锡市滨湖区十里明珠堤',
                            email: 'tech61@yuanfeng.cn',
                            zt: '草稿',
                            ztCode: '1',
                            ztTime: '2021/9/27'
                        },
                    ],
                    pageData: {
                        currentPage: 1,
                        pageSize: 10,
                        total: 196
                    },
                    selectList: [],
                    authForm: {
                        sqsbh: '',
                        sqlx: 1,
                        bsqdwmc: '',
                        bsqdwbgdz: '',
                        bsqdwlxr: '',
                        bsqdwlxrdh: '',
                        bsqdwlxrcz: '',
                        zbdwmc: '',
                        sxsjmc: '',
                        zbxmmc: '',
                        zbxmbh: '',
                        cpxh: '',
                        sshy: '',
                        sqyxq: '',
                        sqgs: '',
                        sqwcdfs: '',
                        email: '',
                        sjgs: '',
                        sjgslxr: '',
                        sqdw: '',
                        sqr: '',
                        sqrdh: '',
                        sqrq: '',
                        bzzzwj: '',
                        fbzwj: ''
                    },
                    certificateList: [
                        { label: '证书1', value: 1 },
                        { label: '证书2', value: 2 },
                        { label: '证书3', value: 3 },
                        { label: '证书4', value: 4 },
                        { label: '证书5', value: 5 },
                    ],
                    goodsData: [
                        { goodsname: 'UPS', goodsCode: '123456', price: '100', number: 111 },
                        { goodsname: 'UPS', goodsCode: '123456', price: '100', number: 111 },
                    ],
                    detailItemList: [
                        {
                            title: '东莞麻涌环保热电厂',
                            baseInfo: [
                                { label: '报备号:', key: 'sqsbh' },
                                { label: '报备关闭:', key: 'sqlx' },
                                { label: '报备状态:', key: 'bsqdwmc' },
                                { label: '赢单/丢单:', key: 'bsqdwbgdz' },
                                { label: '报备成立于:', key: 'bsqdwlxr' },
                                { label: '报备关闭于:', key: 'bsqdwlxrdh' },
                                { label: '报备过期于:', key: 'bsqdwlxrcz' },
                            ]
                        },
                        {
                            title: '报备基本信息',
                            baseInfo: [
                                { label: '项目名称:', key: 'sqsbh' },
                                { label: '跨区：', key: 'sqlx' },
                                { label: 'MOEM设备配套 :', key: 'bsqdwmc' },
                                { label: '客户行业:', key: 'bsqdwbgdz' },
                                { label: '集成商:', key: 'bsqdwlxr' },
                                { label: '集成商省份：', key: 'bsqdwlxrdh' },
                                { label: '赢单率:', key: 'bsqdwlxrcz' },
                                { label: '投标日期:', key: 'zbdwmc' },
                                { label: '招标形式:', key: 'sxsjmc' },
                                { label: '是否需要授权书:', key: 'zbxmmc' },
                                { label: '有效期至:', key: 'zbxmbh' },
                                { label: '商机注册成功理由:', key: 'cpxh' },
                                { label: '状态更新注释:', key: 'sshy' },
                            ]
                        },
                        {
                            title: '最终用户信息',
                            baseInfo: [
                                { label: '最终用户名称:', key: 'sqsbh' },
                                { label: '联系人姓名:', key: 'sqlx' },
                                { label: '电话/手机:', key: 'bsqdwmc' },
                                { label: '国家:', key: 'bsqdwbgdz' },
                                { label: '省份:', key: 'bsqdwlxr' },
                                { label: '市：', key: 'bsqdwlxrdh' },
                                { label: '地址:', key: 'bsqdwlxrcz' },
                                { label: '邮箱:', key: 'zbdwmc' },
                            ]
                        }
                    ]
                }
            },
            methods: {
                tableRowClassName({ row, rowIndex }) {
                    if (row.zt === '已过期' || row.zt === '未成立') {
                        return 'danger-row';
                    }
                    return '';
                },
                search() {
                    console.log('查询');
                },
                reset() {
                    this.searchForm.key = ''
                    this.searchForm.state = ''
                    this.search();
                },
                onSubmit() {
                    console.log(this.authForm, 'authForm')
                },
                selectionChange(selection) {
                    console.log(selection, 'selection')
                    this.selectList = selection;
                },
                exportData() {

                },
                openAuthDialog(type) {
                    this.showDetail = !this.showDetail;
                    this.currentType = type
                    // 查看
                    if (type === 1) {
                        this.disabledAll = true;
                    } else if (type === 2) { // 申请授权
                        this.disabledAll = false;
                    }
                },
                // 撤销
                revoke(data) {
                    console.log('撤销授权')
                },
                withdraw(data) {
                    console.log('撤回')
                },
                extensionRequest(data) {
                    console.log('延期申请')
                },
                // 编辑
                editRow(data) { },
                // 关闭弹框
                closed() {
                    this.showDetail = !this.showDetail;
                    this.disabledAll = false;
                },
                // 切换每页展示数量
                handleSizeChange(size) {
                    console.log(size)
                },
                // 切换页码
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                }
            }
        })
    </script>
</body>

</html>